<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>DatetimeFormat component examples</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <h1>DatetimeFormat component examples</h1>

    <div id="app">
      <h2>basic usages:</h2>
      <i18n-d tag="p" class="p1" :value="new Date()"></i18n-d>
      <i18n-d tag="p" class="p2" :value="new Date()" format="long"></i18n-d>
      <i18n-d
        tag="p"
        class="p3"
        :value="new Date()"
        format="long"
        locale="ja-JP-u-ca-japanese"
      ></i18n-d>

      <h2>slot usages:</h2>
      <i18n-d
        tag="span"
        class="p4"
        :value="new Date()"
        locale="ja-JP-u-ca-japanese"
        :format="{ key: 'long', era: 'narrow' }"
      >
        <template #era="props"><span style="color: green">{{ props.era }}</span></template>
      </i18n-d>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n } = VueI18n

      const i18n = createI18n({
        locale: 'en-US',
        datetimeFormats: {
          'en-US': {
            long: {
              year: 'numeric',
              month: '2-digit',
              day: '2-digit',
              hour: '2-digit',
              minute: '2-digit',
              second: '2-digit'
            }
          },
          'ja-JP-u-ca-japanese': {
            long: {
              era: 'long',
              year: 'numeric',
              month: 'numeric',
              day: 'numeric',
              hour: 'numeric',
              minute: 'numeric',
              second: 'numeric',
              weekday: 'long',
              hour12: true,
              timeZoneName: 'long'
            }
          }
        }
      })

      const app = createApp({})
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
